<template>
  <view class="home-app d-flex flex-column">
    <view class="navigate">
      <mineNavbar :styleData="styleData">
        <view class="tabbarTop">
          <view class="left">
            <picker :value="city.value" @change="ChangeCity" mode="multiSelector" class="picker" :range="city.data"
              range-key="label" @columnchange="handleColumnChange">
              <view class="location">
                <image src="@/static/images/recruit/location.png" />
                <text>{{ city.label || '广州' }}</text>
              </view>
            </picker>
            <!-- <view class="right" @click="handleFocus">
              <image src="@/static/images/recruit/search.png" mode="" />
              <view class="r_input">搜索职位/公司名称</view>
            </view> -->
          </view>
        </view>
      </mineNavbar>
    </view>
    <view class="swiperContain">
      <swiper indicator-dots indicator-active-color="#fff" autoplay="true" class="swiper">
        <swiper-item v-for="item in bannerList" :key="item.contentId">
          <view @click="goWeb(item)">
            <image :src="item.url" :mode="item.title" />
          </view>
        </swiper-item>
        <!-- <swiper-item>
          <image
            src="http://sb9sps5gr.hn-bkt.clouddn.com/swiperF.png"
            mode="" />
        </swiper-item>
        <swiper-item>
          <image
            src="http://sb9sps5gr.hn-bkt.clouddn.com/homeImg.png"
            mode="" />
        </swiper-item> -->
      </swiper>
    </view>
    <view class="advertised" v-if="isshow">
      <view class="a_content">
        <image src="http://sb9sps5gr.hn-bkt.clouddn.com/showImg.png" mode="" class="showImg" />
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/c3c96cda2891467381f385fd63907190.png" mode=""
          class="cancelImg" @click="handleClose" />
      </view>
    </view>

    <view class="category">
      <view @click="
        toPath(
          'subPage/enterprise/home/components/Job-outsourcing',
          'hour'
        )
      ">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/06/06/f60ccdd6a5a543188ea0fc75946c9e06.png"
          mode="" />
        <text>小时工</text>
      </view>
      <view @click="
        toPath(
          'subPage/enterprise/home/components/Job-outsourcing',
          'position'
        )
      ">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/885fa7354445470895d55191aa0cef21.png"
          mode="" />
        <text>岗位外包</text>
      </view>
      <view @click="
        toPath('subPage/enterprise/home/components/Job-outsourcing', 'invite')
      ">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/315b13814cd942f69ca4309c6fbb17e3.png"
          mode="" />
        <text>招聘外包</text>
      </view>
      <view @click="
        toPath(
          'subPage/enterprise/home/components/Job-outsourcing',
          'architecture'
        )
      ">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/06a1bb272716433393d41d97f94e18f2.png"
          mode="" />
        <text>建筑劳务</text>
      </view>
      <!-- <view>
        <image
          src=".@/../../static/images/recruit/banner4.png"
          mode="" />
        <text>行业图谱</text>
      </view> -->
    </view>
    <view class="swiperContain1" v-if="swiperList1.length">
      <swiper indicator-dots indicator-active-color="#fff" autoplay="true" class="swiper">
        <swiper-item v-for="item in swiperList1" :key="item.contentId">
          <view @click="goWeb(item)">
            <image :src="item.url" :mode="item.title" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="bottom" :class="swiperList1.length ? '' : 'swiperContainSty'">
      <view class="workTypeSty">
        <view>
          <view class="left">
            <!-- <view
              v-for="item in workTypeArr"
              v-key="item"
              @click="changeWorkType(item)">
              <view :class="workTypeValue === item ? 'active' : 'common'">{{
                item
              }}</view>
              <image
                src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/12b8c89422f44c25978434a62083c179.png"
                mode=""
                v-if="workTypeValue === item" />
            </view> -->
            <view v-for="item in jobTypeList" :key="item.key" @click="changeJobType(item.key)">
              <view :class="item.key === form.jobType[0] ? 'active' : 'common'">{{ item.name }}</view>
              <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/12b8c89422f44c25978434a62083c179.png"
                v-if="item.key === form.jobType[0]" />
            </view>
          </view>
          <view class="right">
            <!-- <image
              src="@/static/images/recruit/fenlei.png"
              mode=""
              v-if="iconChange"
              @click="changeIcon" />
            <image
              src="@/static/images/recruit/fenlei1.png"
              mode=""
              v-else
              @click="changeIcon" /> -->
          </view>
        </view>
      </view>
    </view>
    <!-- <homeList :workTypeValue="workTypeValue" /> -->
    <scroll-view scroll-y class="scroll-main" @scrolltolower="scrollBottomFn">
      <!-- 列表 -->
      <talentsList :list="list"></talentsList>
      <uni-load-more :status="loading" />
    </scroll-view>

    <statusDialog ref="statusDialog" />
  </view>
</template>

<script>
// import http from "../../utils/http";
// import homeList from "./components/homeList.vue";
import talentsList from "@/components/talentsList/talentsList.vue";
import QQMapWX from '../../static/map/qqmap-wx-jssdk.min.js'

import { getSlideshows, getQuicklinks, streamer } from "@/api/subPage/home.js";
import { getTalentsList } from "@/api/subPage/talents.js";
import { regionTreeLevel, selectMapKey, cityCode } from "@/api/common.js"

export default {
  // components: { homeList },
  components: { talentsList },
  data() {
    return {
      styleData: {
        topText: "",
        show: false,
      },
      region: "广州",
      isshow: false,
      iconChange: true, // 分类图标的切换

      jobTypeList: [
        { key: 3, name: "全职岗位" },
        { key: 2, name: "小时工兼职" },
        { key: 1, name: "零工兼职" },
      ],
      form: {
        city: '',
        pageSize: 10, //pageSize 每页大小
        pageNum: 1, // pageNum 页数
        jobType: [3], // 求职类型 （1=零工、2=兼职，3=全职）
      },

      bannerList: [], //轮播图
      quicklinks: [], //导航图标区

      list: [],
      swiperList1: [],
      pages: 1, //当前分页总页数
      loading: "more", //加载状态
      city: {
        value: '',
        label: '',
        data: [[{ label: '北京' }], [{ label: '北京' }]]
      }
    };
  },

  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  mounted() {
    this.getCityInfo()
    // 根据是否已完善企业资料状态
    let that = this
    uni.getLocation({
      type: "wgs84",
      success: function (res) {
        console.log(res, '位置');
        const { errMsg, longitude, latitude } = res;
        // if (errMsg == "getLocation:ok") {
        //   that.longitude = longitude;
        //   that.latitude = latitude;
        // }
        selectMapKey().then((res1) => {
          console.log(res1, 'key');
          const key1 = res1.trim()
          const qqmapSDk = new QQMapWX({
            key: key1
          })
          console.log(qqmapSDk, '111');
          qqmapSDk.reverseGeocoder({
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success(res2) {
              console.log("res", res2.result.address_component);
              cityCode({
                province: res2.result.address_component.province,
                city: res2.result.address_component.city
              }).then((res3) => {
                that.form.city = res3.data
                that.region = res2.result.address_component.city
                that.getListFn(1);
              })
            }
          })
        })
      },
    });
    this.showDetail()
  },
  methods: {
    // 判断是否显示完善资料
    showDetail() {
      if (this.$store.getters.entDataStatus === '0') {
        this.$refs.statusDialog.open();
      } else {
        this.$refs.statusDialog.close();
      }
    },
    // 获取内容
    getData() {
      getSlideshows().then((res) => {
        this.bannerList = res.data;
      });
      streamer().then((res) => {
        this.swiperList1 = res.data;
      });
      getQuicklinks().then((res) => {
        this.quicklinks = res.data;
      });
      // 获取省市二级
      regionTreeLevel({}).then((res) => {
        if (res.code === 200) {
          this.city.data[0] = res.data
          this.city.data[1] = res.data[0].children
        }
      })
      this.getListFn(1);
    },
    // 跳转外部链接
    goWeb(item) {
      if (item.link.includes("?")) {
        const queryParams = item.link.split("?")[1].split("&");
        const res = {};
        queryParams.forEach((param) => {
          const [key, value] = param.split("=");
          console.log(key, value);
          if (key && value) {
            let parsedValue;
            try {
              parsedValue = JSON.parse(decodeURIComponent(value));
              console.log(parsedValue, "try");
            } catch (error) {
              parsedValue = decodeURIComponent(value);
              console.log(parsedValue, "catch");
            }
            res[key] = parsedValue;
          }
        });
        this.$store.commit("setPathData", res);
      } else {
        this.$store.commit("setPathData", null);
      }
      let str = item.link[0];
      let tab = item.link.indexOf("tabbarChange");
      console.log(str, tab);
      if (str === "/") {
        if (tab === -1) {
          uni.navigateTo({
            url: item.link,
          });
        } else {
          uni.switchTab({
            url: item.link,
          });
        }
      } else {
        uni.navigateTo({
          url: "/pages/recruit/home/webview/index?link=" + item.link,
        });
      }
    },
    // 切换类型
    changeJobType(key) {
      console.log(key);
      this.form.jobType = [key];
      this.pages = 1;
      this.getListFn(1);
    },
    // 获取省市二级
    getCityInfo() {

    },
    // 滑动城市触发
    handleColumnChange(e) {
      console.log(e)
      let index = e.detail.value;
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column === 0) {
        this.city.data[1] = this.city.data[0][index].children;
        this.$set(this.city.data, 1, this.city.data[0][index].children);
      }
    },
    ChangeCity(e) {
      this.city.label = (this.city.data[1])[e.detail.value[1]]?.label
      this.form.city = (this.city.data[1])[e.detail.value[1]].id
      this.changeJobType(3)
    },
    getListFn(current) {
      let pages = this.pages;
      if (current && current > pages) {
        return true;
      }
      let pageNum = current ? current : 1;
      this.loading = pageNum <= pages ? "loading" : "noMore";
      console.log(this.form, "-----this.form");
      this.form.pageNum = pageNum;
      getTalentsList(this.form).then((res) => {
        let records = res.rows ? res.rows : [];
        console.log(pageNum, 'pageNum');
        let newList = pageNum === 1 ? records : [...this.list, ...records];

        let newPages = Math.ceil(res.total / this.form.pageSize);

        this.pages = newPages;

        this.loading = pageNum < newPages ? "more" : "noMore";

        this.list = newList;
        console.log(this.list, '--list');
      });
    },
    // 监听滑动到底部
    scrollBottomFn() {
      let pageNum = this.form.pageNum;
      if (pageNum < this.pages) {
        console.log(pageNum, this.pages);
        this.getListFn(pageNum + 1);
      }
    },

    handleFocus() {
      uni.navigateTo({
        url: "/pages/recruit/home/search/index",
      });
    },
    // 关闭广告弹窗
    handleClose() {
      this.isshow = false;
    },
    // 打开城市选择器
    handleSelectCity(e) {
      console.log(e);
      this.region = e.detail.value[1];
    },
    //切换工作类型
    changeWorkType(e) {
      this.workTypeValue = e;
    },
    // 切换图标
    changeIcon() {
      this.iconChange = !this.iconChange;
    },

    toPath(path, name) {
      uni.navigateTo({
        url: `/${path}?name=${name}`,
      });
    },
  },
  watch: {
    '$store.getters.entDataStatus': {
      handler: function (newVal, oldVal) {
        console.log("数据发生变化啦"); //修改数据时，能看到输出结果
        console.log(newVal, oldVal);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.scroll-main {
  height: 60vh;
}

.home-app {
  height: 100%;
  width: 100%;

  .advertised {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .a_content {
      width: 620rpx;
      height: 915rpx;
      position: relative;

      .showImg {
        width: 620rpx;
        height: 915rpx;
      }

      .cancelImg {
        width: 56rpx;
        height: 56rpx;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  }

  .navigate {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .tabbarTop {
    width: 100%;
    font-size: 24rpx;
    display: flex;
    flex-wrap: nowrap;

    .left {
      height: 80rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;

      .location {
        min-width: 100rpx;
        display: flex;
        align-items: center;
        color: #fff;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 3px;
        }
      }

      .right {
        height: 60rpx;
        width: 410rpx;
        display: flex;
        align-items: center;
        border-radius: 64px;
        background-color: #fff;
        border-radius: 64px;
        color: #00000033;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 10rpx;
          margin-right: 20rpx;
          margin-left: 20rpx;
        }
      }
    }
  }

  .swiperContain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 568rpx;

    .swiper {
      height: 100%;

      image {
        width: 100%;
        height: 480rpx;
      }
    }
  }

  .category {
    width: 100%;
    height: 210rpx;
    position: absolute;
    top: 450rpx;
    left: 0;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    >view {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;

      image {
        width: 88rpx;
        height: 88rpx;
        margin-bottom: 5px;
      }
    }
  }
}

.bottom {
  margin-top: 30rpx;
  background: #f9f9f9;

  .workTypeSty {
    color: #000;
    overflow: hidden;

    >view {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;

        >view {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 10px;
          margin-right: 5px;

          >view {
            margin-bottom: 5px;
            color: rgba(0, 0, 0, 0.5);
            font-size: 12px;
          }

          .active {
            color: #000;
            font-size: 16px;
            font-family: PingFang-SC-Heavy;
            font-weight: 900;
          }
        }

        image {
          width: 20px;
          height: 8px;
        }
      }

      .right {
        margin-right: 10px;

        image {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 670rpx;
  height: 758rpx;
  background-image: linear-gradient(180deg,
      #fff6eb 1%,
      #ffffff 6%,
      #ffffff 100%);
  border-radius: 32rpx;

  .dialogTop {
    display: flex;
    justify-content: space-between;
    padding: 32rpx;

    .success {
      width: 144rpx;
      height: 50rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000e0;
    }

    .close {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 164rpx;
      height: 164rpx;
      margin-bottom: 32rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .status {
      width: 144rpx;
      height: 50rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000e0;

      text-align: center;
      margin-bottom: 10rpx;
    }

    .desc-i {
      width: 264rpx;
      height: 66rpx;

      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
      text-align: center;
      margin-top: 10rpx;
      margin-bottom: 120rpx;
    }

    .btn {
      display: flex;
      align-items: center;

      .finish {
        width: 240rpx;
        height: 80rpx;
        background: #ff9e24;
        border-radius: 44rpx;
        line-height: 80rpx;
        margin-right: 32rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        text-align: center;
      }

      .later {
        width: 240rpx;
        height: 80rpx;
        background: #d8d8d83d;
        border-radius: 44rpx;
        line-height: 80rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000e0;
        text-align: center;
      }
    }
  }
}

.swiperContain1 {
  width: 100%;
  padding: 0 24rpx;
  height: 180rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin: 30rpx 0;
  margin-top: 650rpx;

  .swiper {
    height: 100%;
    border-radius: 40rpx;
    z-index: 99;

    image {
      width: 100%;
      height: 180rpx;
      border-radius: 20rpx;
    }
  }
}

.swiperContainSty {
  margin-top: 700rpx;
}
</style>
